<template>
  <div class="aui-theme-tools"
       :class="{ 'aui-theme-tools--open': isOpen }">
    <div class="aui-theme-tools__toggle"
         @click="isOpen = !isOpen">
      <svg class="icon-svg"
           aria-hidden="true">
        <use xlink:href="#icon-setting"></use>
      </svg>
    </div>
    <div class="aui-theme-tools__content">
      <div class="aui-theme-tools__item">
        <h3>{{$t('main.navbar')}}</h3>
        <el-checkbox v-model="$store.state.navbarLayoutType"
                     true-label="colorful">{{$t('main.colorful')}}</el-checkbox>
      </div>
      <div class="aui-theme-tools__item">
        <h3>{{$t('main.sidebar')}}</h3>
        <el-checkbox v-model="$store.state.sidebarLayoutSkin"
                     true-label="dark">{{$t('main.dark')}}</el-checkbox>
      </div>
      <div class="aui-theme-tools__item">
        <h3>{{$t('main.theme')}}</h3>
        <el-radio-group v-model="themeColor"
                        @change="themeColorChangeHandle">
          <el-radio v-for="item in themeList"
                    :key="item.name"
                    :label="item.name">{{  computedColorName(item) }}</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
// import themeColorList from '@/element-ui/config'
export default {
  data () {
    return {
      isOpen: false,
      themeList: require('@/element-ui/config.js'),
      themeColor: 'blue'
    }
  },
  created () {
    this.setStoreThemeColor('blue')
  },
  methods: {
    computedColorName (e) {
      const lan = Cookies.get('language')
      if (lan === 'zh-CN') return e.desc
      else return e.name
    },
    themeColorChangeHandle (val) {
      var styleList = [
        {
          id: 'J_elementTheme',
          url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
        },
        {
          id: 'J_auiTheme',
          url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
        }
      ]
      for (var i = 0; i < styleList.length; i++) {
        var el = document.querySelector(`#${styleList[i].id}`)
        if (el) {
          el.href = styleList[i].url
          continue
        }
        el = document.createElement('link')
        el.id = styleList[i].id
        el.href = styleList[i].url
        el.rel = 'stylesheet'
        document.querySelector('head').appendChild(el)
      }
      this.setStoreThemeColor(val)
    },
    setStoreThemeColor (value) {
      // const themeColor = () => {
      //   return themeColorList.filter(e => e.name === value)[0].color
      // }
      this.$store.commit('SET_THEME_COLOR', '#17114d')
    }
  }
}
</script>
